<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">

      <el-select v-model="listQuery.salesman" placeholder="请选择业务员" class="filter-item" style="width: 130px">
        <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-date-picker
        v-model="datetime"
        range-separator="至"
        start-placeholder="发货开始时间"
        end-placeholder="发货结束时间"
        type="daterange"
        :picker-options="pickerOptions"
        :default-time="['00:00:00']"
        value-format="yyyy-MM-dd"
        class="filter-item"
      />

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      size="mini"
      :show-summary="statistics != null"
      :summary-method="getSummaries"
      style="width: 100%;"
    >
      <el-table-column label="订单编号" size="mini" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.order_id }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="用户">
        <template slot-scope="{row}">
          {{ row.wechat_nick_name }}
          <div><el-link type="primary">{{ row.enrollment_name }}</el-link></div>
        </template>
      </el-table-column>

      <el-table-column label="订单金额" prop="amount" min-width="100" />

      <el-table-column label="累计满100元" width="100">
        <template slot-scope="{row}">
          {{ row.order_number }}
        </template>
      </el-table-column>

      <el-table-column label="下单时间" align="center">
        <template slot-scope="{row}">
          {{ row.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>

      <el-table-column label="付款时间" align="center">
        <template slot-scope="{row}">
          {{ row.paid_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>

      <el-table-column label="发货时间" align="center">
        <template slot-scope="{row}">
          {{ row.shipped_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>

      <el-table-column label="邀请用户">
        <template slot-scope="{row}">
          {{ row.inviter }}
          <div><el-link type="primary">{{ row.inviter_enrollment_name }}</el-link></div>
        </template>
      </el-table-column>

      <el-table-column label="业务员">
        <template slot-scope="{row}">
          {{ row.salesman }}
        </template>
      </el-table-column>

      <el-table-column label="业务关系" width="100">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.relation == 'DIRECT' ? '直接邀请' : '' }}</el-link>
          <el-link type="danger">{{ row.relation == 'INDIRECT' ? '间接邀请' : '' }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="开发奖" width="82" align="center">
        <template slot-scope="{row}">
          {{ row.direct_reward }}
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
